<template>
  <div class="software">
    <!--Corporate Page Banner Section-->
    <div
      class="co-page-banner-section section"
      data-page-title="about us"
      style="background-image: url(img/page-banner-bg.jpg)"
    >
      <div class="container-fluid">
        <div class="row">
          <div class="co-page-banner text-center col-xs-12">
            <h1>软件列表</h1>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-12">
        <div class="co-section-title-1 text-center mb-110">
          <p>软件简介</p>
        </div>
      </div>
    </div>
    <div class="softwareList">
      <softwareInfo
        v-for="(item, index) in filteredDataList"
        :dataEntity="item"
        :key="index"
        class="softwareInfo"
      ></softwareInfo>
    </div>
  </div>
</template>
  <script>
import softwareInfo from "@/components/softwareInfo.vue";
import { softwareDataList } from "../../public/data.js";
export default {
  name: "software",
  computed: {
    filteredDataList() {
      if (this.type == 0) {
        return this.dataList;
      } else {
        return this.dataList.filter((item) => {
          return item.type == this.type;
        });
      }
    },
  },
  data() {
    return {
      type: 0,
      dataList: [],
    };
  },
  // 注册组件
  components: { softwareInfo },
  methods: {
    init() {
      this.dataList = softwareDataList;
      this.type = this.$route.query.type;
    },
  },
  created() {
    // 监听
    this.init();
  },
  beforeUpdate() {},
  // 挂载前状态(里面是操作)
  beforeMount() {},
};
</script>
  <style lang="scss">
.software {
  .softwareList {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    flex-direction: row;
    width: 100%;
    height: auto;
    img {
    }
    .softwareInfo {
      width: 30%; /* 或者使用具体的宽度 */
      flex-grow: 0;
      flex-shrink: 0;
      margin: 10px; /* 为了在子元素之间添加间隔 */
      height: auto;
    }
  }
}
</style>
  